<template>
	<view>
		<view class="order z-padding-32 z-radius-20 z-margin-b-24" @tap="orderTap">
			<view class="order_box_top">
				<view class="z-flex-c" v-if="info.shopInfo" @tap.stop="orderShopTap">
					<view class="z-font-24 z-margin-r-8">{{ info.shopInfo.abbr }}</view>
					<image src="/static/service/more.png" class="more"></image>
				</view>
				<view class="z-flex-1"></view>
				<view class="text_999 z-font-28" v-if="info.status === 0">待支付</view>
				<view class="text_999 z-font-28 t-red" v-else-if="info.is_service === 1">售后中</view>
				<view class="text_999 z-font-28 t-red" v-else-if="info.is_service === 2">已退款 ¥{{ info.refund_price }}</view>
				<view class="text_999 z-font-28" v-else-if="info.to_shop === 'shop' && info.status === 2">待核销</view>
				<view class="text_999 z-font-28" v-else-if="info.status === 1">订单已提交</view>
				<view class="text_999 z-font-28" v-else-if="info.status === 2">订单已接单</view>
				<view class="text_999 z-font-28" v-else-if="info.status === 3">已出发</view>
				<view class="text_999 z-font-28" v-else-if="info.status === 4">已到达</view>
				<view class="text_999 z-font-28" v-else-if="info.status === 5">服务中</view>
				<view class="text_999 z-font-28" v-else-if="info.status === 6">已完成</view>
				<view class="text_999 z-font-28" v-else-if="info.status === 7">已评价</view>
				<view class="text_999 z-font-28" v-else-if="info.status === -1">已取消</view>
			</view>
			<view class="order_content z-margin-tb-32">
				<view class="order_content_left z-flex-1">
					<view class="order_content_left_top">
						<view class="timetext z-flex z-font-22">{{ info.to_shop === 'door' ? '预约时间' : '到店核销' }}</view>
						<view class="z-font-w z-flex-1 hidden z-margin-l-16 z-font-28">{{ info.orderDetail.name }}</view>
					</view>
					<view class="month_clock">
						<view class="month">
							{{ info.to_shop === 'door' ? tool.formatTime(info.starttime, 'mm-dd') : '' }}
						</view>
						<view class="clock z-margin-l-24">
							{{ info.to_shop === 'door' ? tool.formatTime(info.starttime, 'HH:MM') : '' }}
						</view>
					</view>
					<view class="text_999 z-font-24" v-if="info.to_shop === 'shop' && info.shopName.trade_hour">{{ info.shopName.trade_hour }}</view>
					<view class="text_999 z-font-24" v-else-if="info.status === 0">该订单还没有支付</view>
					<view class="text_999 z-font-24" v-else-if="info.status === 1">等待服务人员接单</view>
					<view class="z-flex-c" v-else-if="info.skillInfo">
						<image :src="cdn(info.skillInfo.image)" class="avatar z-margin-r-16" mode="aspectFill" lazy-load lazy-load-margin="0"></image>
						<view class="z-font-24">{{ info.skillInfo.name }}</view>
					</view>
				</view>
				<image :src="cdn(info.orderDetail.image)" class="order_content_img z-radius-24 z-flex-0 z-margin-l-24" mode="aspectFill" lazy-load lazy-load-margin="0" />
			</view>
			<!-- <van-divider /> -->
			<view class="order_bottom">
				<view class="money z-font-w">￥{{ info.payprice }}</view>
				<view class="order_bottom_right">
					<view class="plus z-radius-8 z-margin-l-24" @tap.stop="orderBtnTap('4')" v-if="info.status === 0">支付</view>
					<view class="refund z-radius-8 z-margin-l-24" @tap.stop="orderBtnTap('1')" v-if="info.status > 0 && info.is_service !== 2 && info.is_settle < 2">
						申请退款
					</view>
					<view
						class="plus z-radius-8 z-margin-l-24"
						@tap.stop="orderBtnTap('2')"
						v-if="info.status === 2 || info.status === 3 || info.status === 4 || info.status === 5"
					>
						加项
					</view>
					<view class="difference z-radius-8 z-margin-l-24" @tap.stop="orderBtnTap('3')" v-if="info.status > 0 && info.status < 6">补差价</view>
					<view class="plus z-radius-8 z-margin-l-24" @tap.stop="orderBtnTap('5')" v-if="info.status === 6">去评价</view>
					<view class="plus z-radius-8 z-margin-l-24" @tap.stop="orderBtnTap('6')" v-if="info.status === 7">查看评价</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['info'],
	data() {
		return {};
	},
	methods: {
		orderShopTap() {
			this.$emit('orderShopTap',this.info)
			// this.triggerEvent('orderShopTap', this.info);
		},
		orderBtnTap(e) {
			this.$emit('orderBtnTap', { info: this.info, type: e })
			// this.triggerEvent('orderBtnTap', { info: this.info, type: e.currentTarget.dataset.type });
		},
		orderTap(e) {
			console.log(e)
			// this.triggerEvent('orderTap', this.info);
			this.$emit('orderTap', this.info)
		}
	}
};
</script>

<style lang="scss">
.order {
	background-color: #fff;
	box-sizing: border-box;
}
.order_box_top {
	display: flex;
	align-items: center;
}
.order_box_top_let {
	display: flex;
	align-items: center;
}
.order_content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order_content_left {
	display: flex;
	flex-direction: column;
	height: 180rpx;
	justify-content: space-around;
	overflow: hidden;
}
.order_content_img {
	width: 180rpx;
	height: 180rpx;
}
.order_content_left_top {
	display: flex;
	align-items: center;
}
.timetext {
	background-color: #f5f7fb;
	height: 44rpx;
	width: 120rpx;
	color: #6b738b;
	border-radius: 6rpx;
}
.avatar {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
}

.month_clock {
	display: flex;
	align-items: center;

	font-size: 40rpx;
	font-weight: bold;
}
.clock {
	color: $uni-maingreencolor;
}
.order_bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.money {
	color: $uni-mainmoneycolor;
	flex: 1;
}
.order_bottom_right {
	font-size: 24rpx;
	flex: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.refund {
	border: 1rpx solid rgba(164, 169, 183, 0.2);
	width: 128rpx;
	height: 56rpx;
	line-height: 56rpx;
	text-align: center;
	color: #a4a9b7;
}
.plus {
	background: $uni-mainmoneycolor;
	color: #fff;
	width: 128rpx;
	height: 56rpx;
	line-height: 56rpx;
	text-align: center;
}
.difference {
	background: $uni-maingreencolor;
	color: #fff;
	width: 128rpx;
	height: 56rpx;
	line-height: 56rpx;
	text-align: center;
}

.more {
	width: 22rpx;
	height: 22rpx;
}

.t-red {
	color: #ff2121;
}
</style>
